<template>
  <view class="payment-radio">
    <view class="section-title">
      <text>支付方式</text>
    </view>
    
    <view class="radio-list">
      <view 
        class="radio-item"
        v-for="item in methods"
        :key="item.value"
        @click="$emit('update:modelValue', item.value)"
      >
        <view class="radio-left">
          <uni-icons :type="item.icon" size="24" color="#666"></uni-icons>
          <text>{{item.label}}</text>
        </view>
        <radio 
          :checked="modelValue === item.value" 
          color="$primary-color"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  },
  methods: {
    type: Array,
    default: () => []
  }
})

defineEmits(['update:modelValue'])
</script>

<style lang="scss">
.payment-radio {
  background-color: $white-bg;;
  padding: 30rpx;
  
  .section-title {
    font-size: $font-size-30rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
  
  .radio-list {
    .radio-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      .radio-left {
        display: flex;
        align-items: center;
        
        .uni-icons {
          margin-right: 20rpx;
        }
        
        text {
          font-size: $font-size-28rpx;
        }
      }
    }
  }
}
</style>